 import React, { Component } from 'react' 
  import { Upload, Icon, Modal,message } from 'antd';
  import  PropTypes from 'prop-types'
  import { UPLOAD_IMG_NAME,BASE_IMG_PATH } from '../../utils/constant.js'
  import './pictureWall.less'

  import { deleteImgs } from '../../api'

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

class PicturesWall extends  Component {
  static propTypes={
    imgs : PropTypes.array
  }

  constructor(props){
    super(props);

     let fileList = [];

     const {imgs} = this.props

     if(imgs && imgs.length > 0){
       fileList = imgs.map((img,index)=>{
         return {
           uid:-index,
           name:img,
           status:'done',
           url:BASE_IMG_PATH + img
         }
       })
     }


    this.state={
      previewVisible: false,
      previewImage: '',
      fileList:fileList
  }
   
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handleChange = async ({file, fileList }) =>{   
    const {status} = file

    if(status === 'done'){
console.log('诈骗强===》',file)
         const imgRes = file.response
         if(imgRes.status === 0){
           message.success('图片上传成功')
           const {name,url} = imgRes.data
           file = fileList[fileList.length - 1]
           file.name = name
           file.url = url
         }else{
          message.error('上传图片失败')
        } 
    }else if(status === 'removed'){
      const removeImg = await deleteImgs(file.name)
      if(removeImg.status === 0){
        message.success('删除图片成功')
    }else{
  
      message.error('删除图片失败')
    }
  }
    this.setState({ fileList });
  }

  getImgs=()=>{
    const  {  fileList } = this.state
    console.log('图片信息===》',fileList)
    return   fileList.map(item=>item.name)
  }

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Upload
          action="/manage/img/upload"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          accept="image/*"
          name={UPLOAD_IMG_NAME}
        >
          {fileList.length >= 3 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}

export default PicturesWall